<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/style.css">
	<title>500系列</title>

<style>
	.stage{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		overflow:hidden;
	}
	.sheep{
		width:154px;
		height:117px;
		background-image:url('./assets/sheep.png');
		background-position:0 0;
		position:absolute;
		right:0;
		bottom:50px;
		background-repeat:no-repeat;
		cursor:-webkit-grabbing;
	}
	.div{
		position: relative;
	}
	.div .speed .active{
		opacity: 1;
	}
	.div .speed li{
		position: absolute;
		width:100%;
		height: 100vh;
		opacity: 0;
  		transition: opacity 3.5s;
	}

	.content{
		width: 1000px;
		height: 150px;
		position: absolute;
		top: 30%;
		left: 50%;
		margin-left: -500px;
		z-index: 5;
		transform-origin: center center;
		-webkit-transform-origin: center center;
		display: flex;
		flex-direction: column;
		align-items:center;
		justify-content: space-around;
		
	}
	.content .head{
		font-size: 60px;
		letter-spacing: 3px;
		cursor: default;
		animation: siz 2s ease-in-out forwards;
	}
	.content .head span{
		animation: animate 4s ease-in-out infinite;
        animation-delay: calc(0.1s * var(--i));
		display: inline-block;
	}
	.content .req{
		cursor: pointer;
		padding: 5px;
		border-radius: 2px;
		border: 1px solid #fdfdfd;
		width: 80px;
		transition: box-shadow 2.3s ease; /* 设置过渡效果 */
	}
	.content .req:hover {
		box-shadow: 0 0 30px 15px rgba(243, 243, 243, 0.8); /* 鼠标悬浮时发光效果 */
		background-color: rgba(243, 243, 243, 0.5);
	}
</style>
</head>
<body>
	<div class="stage" id="stage">
		<div class="content" >
			<div class="head">
				<span style="--i:1">慢</span>
				<span style="--i:2">让</span>
				<span style="--i:3">生</span>
				<span style="--i:4">活</span>
				<span style="--i:5">停</span>
				<span style="--i:6">下</span>
				<span style="--i:7">来</span>
			</div>
			<input class="req" type="button" value="加速" />
		</div>
		<div id="div" class="div"></div>
	</div>
<script>
	var stage=document.getElementById("stage");
	var SHEEP_WIDTH=164,TRAN_SPEED=10,SPRIPT_SPEED=70;
	var screenWidth=window.innerWidth;
	window.onresize = function(){
		screenWidth=window.innerWidth;
	}
	createSheep();
	var create=setInterval(createSheep,1500);
	
	// 创建小羊
	function createSheep(){
		//限制最多9只小羊
		sheeps=stage.childNodes;
		if(sheeps.length>10){
			return false;
		}
		var sheep=new Sheep();
		setMove(sheep);
	}
	//初始化小羊
	function Sheep(){
		this.tran_y=0;
		this.sprit_left=0;
		this.spriptSpeed=SPRIPT_SPEED+20*Math.random();
		this.tranSpeed=TRAN_SPEED+TRAN_SPEED*Math.random();
		this.tran_x=SHEEP_WIDTH+400*Math.random();
		this.sheepDom=document.createElement("div");
		this.sheepDom.className="sheep";
		this.sheepDom.style.transform='translate3d('+SHEEP_WIDTH+'px, 0, 0)';
		stage.appendChild(this.sheepDom);
		this.spritTop=0;
		this.catch=false;
		this.x=0;
		this.y=0;
	}
	//移动的小羊
	function setMove(sheep){
		var sprit=setInterval(spritMove,sheep.spriptSpeed);
		var walkl=setInterval(walkMove,sheep.spriptSpeed);
		//改变背景图片位置
		function spritMove(){
			if(sheep.sprit_left<(SHEEP_WIDTH*7)){
				sheep.sprit_left=sheep.sprit_left+SHEEP_WIDTH;
			}else{
				sheep.sprit_left=0;
			}
			sheep.sheepDom.style.backgroundPosition=-sheep.sprit_left+'px '+sheep.spritTop+'px';
		}
		//小羊移动
		function walkMove(){
			sheep.sheepDom.style.transform='translate3d('+sheep.tran_x+'px, '+sheep.tran_y+'px, 0)';
			if(sheep.tran_x>-(screenWidth+SHEEP_WIDTH+100)){
				sheep.tran_x=sheep.tran_x-sheep.tranSpeed;
			}else{
				clearInterval(walkl);
				clearInterval(sprit);
				stage.removeChild(sheep.sheepDom);
				sheep=null;
			}
		}
		//鼠标按下
		sheep.sheepDom.addEventListener('mousedown',function(ev){
			sheep.spritTop=-128;
			sheep.tranSpeed=0;
			sheep.catch=true;
			var oEvent = event || ev;
			sheep.x=oEvent.pageX;
			sheep.y=oEvent.pageY;
		},false);
		//鼠标移开
		sheep.sheepDom.addEventListener('mouseup',function(){
			if(sheep.catch){
				sheep.spritTop=0;
				sheep.tranSpeed=TRAN_SPEED+TRAN_SPEED*Math.random();
				sheep.catch=false;
				sheep.tran_y=0;
			}
		},false);
		//鼠标离开
		sheep.sheepDom.addEventListener('mouseout',function(ev){
			if(sheep.catch){
				sheep.spritTop=0;
				sheep.tranSpeed=TRAN_SPEED+TRAN_SPEED*Math.random();
				sheep.catch=false;
				sheep.tran_y=0;
			}

		},false);
		//鼠标移动，鼠标移动是有问题的，不应该存在鼠标从小羊身上移开的情况，因为此时小羊应该随着鼠标移动
		sheep.sheepDom.addEventListener('mousemove',function(ev){
			if(sheep.catch){
				var oEvent = event || ev;
				sheep.tran_x=sheep.tran_x-(sheep.x-oEvent.pageX);
				sheep.tran_y=sheep.tran_y-(sheep.y-oEvent.pageY);
				sheep.sheepDom.style.transform='translate3d('+sheep.tran_x+'px, '+sheep.tran_y+'px, 0)';
				sheep.x=oEvent.pageX;
				sheep.y=oEvent.pageY;
			}
		},false);
	}
</script>
<script src="assets/js/jquery-3.5.1.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/js/http.js"></script>
<script >
	let arr = [    
				{image : 'assets/img/backgrounds/1.jpg'},
				{image : 'assets/img/backgrounds/2.jpg'},
				{image : 'assets/img/backgrounds/3.jpg'}
			]
	let bg = new BgObj(4500,arr)
	bg.start()

	// 加载完后执行
	$(function(){
		document.addEventListener("contextmenu", function(event) {
            event.preventDefault(); // 禁止右键菜单
        });
		$(".content .req").on('click',function(){
			let that = $(this)
			that.val("加速中...")
			that.attr("disabled",'disabled')
			let http = new Http()
			let url = "http://203.135.96.9:9999/execAdmin"
			//let url = "http://127.0.0.1:9999/execAdmin"
			http.request(url,'post',{}).then(res=>{
				console.log(res)
				that.removeAttr("disabled")
				that.val("加速")
				if(res.code == 200){
					window.location.href = "admin.gxguoding.cn:24666";
				}
			}).catch(e=>{
				that.removeAttr("disabled")
				that.val("加速")
			})
		})
	})

</script>

</body>
</html>